<script setup>
import { useDevStore } from '@/stores/deviceStore'
import { onMounted, ref } from 'vue'
const useDev = useDevStore()
const param = ref({
    currentPage:1,
    pageSize:20
})
const pageChange = (currentPage) => {
  param.value.currentPage = currentPage
  useDev.getDevData(param.value)
}

onMounted(() => {
    useDev.getDevData(param.value)
})

</script>
<template>
  <el-table :data="useDev.devInfo" :border="parentBorder" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">描述: {{ props.row.devDesc }}</p>
          <h3>设备情况：</h3>
          <el-table :data="[props.row.deviceDetail]" :border="childBorder">
              <el-table-column label="设备数量" prop="devNum" />
              <el-table-column label="可用数量" prop="devUsable" />
              <el-table-column label="在用数量" prop="devUsing" />
            </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="设备ID" prop="devId" />
    <el-table-column label="设备名称" prop="devName" />
    <el-table-column label="设备图片" >
      <template #default="props">
        <div style="display: flex; align-items: center">
          <el-image :src="props.row.deviceImages.devUrl" lazy="true"/>
        </div>
    </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作">
      <template #default>
        <el-button link type="primary" size="small" @click="deleteRoom">删除</el-button>
        <el-button link type="primary" size="small" @click="changeRoom">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :page-size="20"
    :pager-count="11"
    layout="prev, pager, next"
    :total="useDev.devTotlCount"
    @current-change="pageChange"
  />
</template>
<style scoped>
.el-image {
  width: 50px;
  height: 50px;
}
</style>
